<script lang="ts" setup>
import { ref, computed, Ref } from 'vue';
import { ElDrawer, ElDescriptions, ElDescriptionsItem } from 'element-plus'
import { getRespondentByPhone, getAllRespondent, updateRespondent, changePhone, getRespondentById } from '@/axios/respondent/respondentReq'
import  Respondent  from '@/types/response/respondent';
import { ElMessage } from 'element-plus'
import {changeUserState, getUserStatesByIds} from '@/axios/admin/accountReq'

interface ExtendedRespondent extends Respondent {
  state?: number;
  getSex(): "男" | "女" | "未知";
}

const stateOptions = [
  {
    value: 1,
    label: '启用',
  },
  {
    value: 0,
    label: '停用',
  },{
    value:-1,
    label:'未激活',
  }
];

//用户搜索时输入的名字
const name=ref('')

const respondents:Ref<Respondent[]> = ref([]);

const respondentModel = ref<ExtendedRespondent>({
  respondentId: null,
  name: '',
  idNum: '',
  nation: '',
  income:null,
  education: '',
  address: '',
  phoneNum: '',
  career: '',
  cars: '',
  houseProperty: '',
  createdTime: '',
  state: 1,
  getSex: () => "未知"
})

const getRespondents = async ()=>{
  let result = await getAllRespondent();
  respondents.value = result;
  let states = await getUserStatesByIds(respondents.value.map(respondents => respondents.respondentId));
  respondents.value = respondents.value.map(respondent => ({
      ...respondent,
      state: states.get(respondent.respondentId) || undefined,
      getSex: Respondent.getSex(respondent.idNum)
    }));
}
getRespondents();

// 切换被申请人状态的方法
const toggleState = async (respondent: ExtendedRespondent) => {
  respondent.state = respondent.state === 1 ? 0 : 1;
  const success = await changeUserState(respondent.respondentId, respondent.state); // 更新服务器状态
  if (success) {
    respondent.state = respondent.state;
    ElMessage({
      type: 'success',
      message: '状态切换成功',
    });
  } else {
    ElMessage({
      type: 'error',
      message: '状态切换失败',
    });
  }
};

const filteredRespondents = computed(() => {
  return respondents.value.filter(respondent => 
    (!name.value || respondent.name.includes(name.value)) 
  );
});



//被申请人详细信息窗口抽屉
const table = ref(false)
const selectedRespondent:Ref<Respondent> = ref(null);

const openDrawer = (respondent: any) => {
  selectedRespondent.value = respondent;
  table.value = true;
};
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>被申请人管理</span>
      </div>
    </template>
    <!-- 搜素表单 -->
    <el-form inline>
      <el-form-item label="姓名：">
        <el-input v-model="name" style="width: 240px" clearable placeholder="请输入筛选姓名" />
      </el-form-item>
    </el-form>


    <el-table :data="filteredRespondents" style="width: 100%">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="gender">
        <template #default="scope">
          {{ Respondent.getSex(scope.row.idNum) }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phoneNum"></el-table-column>
      <el-table-column label="状态" prop="state">
        <template #default="scope">
          {{ stateOptions.find(s => s.value === scope.row.state)?.label || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
             v-if="scope.row.state !== -1"
            :type="scope.row.state === 1 ? 'danger' : 'success'"
            circle
            plain
            @click="toggleState(scope.row)"
          >
            {{ stateOptions.find(s => s.value === scope.row.state)?.label === '启用' ? '停用' : '启用' }}
          </el-button>
        <el-button text type="primary" @click="openDrawer(scope.row)">详细</el-button>
      </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
  </el-card>

  <el-drawer
  v-model="table"
  title="被申请人详细信息"
  direction="rtl"
  size="50%"
  >
  <el-descriptions :column="1" border :data="selectedRespondent">
    <el-descriptions-item label="姓名">{{ selectedRespondent?.name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ Respondent.getSex(selectedRespondent.idNum) }}</el-descriptions-item>
      <el-descriptions-item label="民族">{{ selectedRespondent?.nation }}</el-descriptions-item>
      <el-descriptions-item label="收入">{{ selectedRespondent?.income }}</el-descriptions-item>
      <el-descriptions-item label="学历">{{ selectedRespondent?.education }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ selectedRespondent?.address }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ selectedRespondent?.phoneNum }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{ selectedRespondent?.idNum }}</el-descriptions-item>
      <el-descriptions-item label="职业">{{ selectedRespondent?.career }}</el-descriptions-item>
      <el-descriptions-item label="车辆">{{ selectedRespondent?.cars }}</el-descriptions-item>
      <el-descriptions-item label="房产">{{ selectedRespondent?.houseProperty }}</el-descriptions-item>
  </el-descriptions>
  </el-drawer>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>